<template>
<!-- 尽量用class来控制样式, 而不是style    isEnter ? 'active' : '' -->
  <li :class="{active: isEnter}" @mouseenter="isEnter=true" @mouseleave="isEnter=false">
    <label>
      <input type="checkbox" :checked="todo.done" @change="handleChange"/>
      <span>{{todo.title}}</span>
    </label>
    <button class="btn btn-danger" @click="deleteTodo(index)">删除</button>
  </li>
</template>

<script>
export default {
  name: 'Item',
  // 声明接收
  props: {
    todo: {
      type: Object, // 类型
      required: true, // 必须传递
    },
    deleteTodo: {
      type: Function,
      required: true
    },
    index: {
      type: Number,
      required: true
    },
    checkTodo: {
      type: Function,
      required: true
    }
  },

  data () {
    return {
      isEnter: false, // 标识是否是进入的状态
    }
  },

  methods: {
    handleChange (e) {
      // 得到当前的选中状态
      const checked = e.target.checked
      // 更新对应todo的done属性值为checked
      // this.todo.done = checked
      this.checkTodo(this.todo, checked)
    }
  }
}
</script>

<style scoped>
li {
  list-style: none;
  height: 36px;
  line-height: 36px;
  padding: 0 5px;
  border-bottom: 1px solid #ddd;
}

li label {
  float: left;
  cursor: pointer;
}

li label li input {
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  top: -1px;
}

li button {
  float: right;
  display: none;
  margin-top: 3px;
}

/* 让按钮显示, 背景为灰色 start*/
li.active {
  background-color: #ccc;
}
li.active button {
  display: block;
}
/* 让按钮显示, 背景为灰色 end*/


li:before {
  content: initial;
}

li:last-child {
  border-bottom: none;
}
</style>
